<template>
  <h1>{{hello}}</h1>
  <button @click="sub">+</button>
  {{count}}
  <button @click="add">-</button>
  <h1>{{repositories.token}}</h1>
</template>

<script lang="ts">
  import {defineComponent,onMounted,ref} from 'vue'
  import {login} from '../api/user';

  export default defineComponent({
    name: "testSetup",
    props: {
      hello: {
        type: String,
        required: true,
        default: '你好'
      }
    },

    data() {
      return {
        num: 0
      };
    },
    methods:{
      sub() {
        this.count++
      },
      add() {
        this.count--
      }
    },

    // async mounted() {
    //   let res = await login({name: 'zhangsan', pwd: '123'});
    //   console.log(res);
    // },

    created() {
      // 初始化 filter  data  methods
      console.log('created')
    },
    // 最先执行
    setup(props) { // 父组件传递过来的值
      // let count =0 // ref(0);
      // 不能使用this
      // console.log('setup', props);
      // 必须要返回一个对象
      let repositories = ref({});
      console.log('repositories ');
      const getLoin = async () => {
        repositories.value = await login({name: 'zhangsan', pwd: '123'});
        console.log(repositories); // Proxy 访问器属性  Object.defineProtopy(...)
      };
      onMounted(getLoin);
      return {
        // count,
        repositories, getLoin
      }
    }
  })
</script>

<style scoped>

</style>
